<template>
	<view class="gui-relative" style="height:100vh;">
		<view>
			<view class="gui-box-shadow-md gui-border-box gui-relative gui-padding">
				<image :src="groupschedule.Groupcourse.cover_image" mode="widthFix"
					style="width:100%;will-change: transform;" class="gui-border-radius">
				</image>
				<view class="gui-absolute-rb gui-h3 gui-color-white gui-bold" style="right:60rpx;bottom:60rpx;">
					{{groupschedule.Groupcourse.name}}
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding gui-flex gui-space-between gui-align-items-center  gui-bg-white">

				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="calendar-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">约课</text>
				</view>
				<view class="gui-margin-x">
					<text class="gui-boldder gui-color-gray gui-text-small">您已预约</text>
					<text class="gui-boldder" style="color:#2979ff">{{currentApptAmount}}</text>
					<text class="gui-boldder gui-color-gray gui-text-small">次，还可以约{{3-currentApptAmount}}次</text>
				</view>
				<view class="gui-flex1  gui-flex gui-justify-content-end">
					<view class="gui-text-center">
						<view class="gui-text-small gui-color-gray">数量</view>
						<view class="gui-shoppingcard-goods-number">
							<gui-step-box :maxNum="3-currentApptAmount" :minNum="1" :value="1"
								:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-1']"
								:buttonClass="['gui-primary-color', 'gui-step-box-button']"
								@change="numberChange"></gui-step-box>
						</view>
					</view>
				</view>

			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding gui-flex gui-space-between gui-align-items-center" style="height:156rpx;">
				<view class="">
					<view class="gui-flex gui-justify-content-start gui-align-items-center">
						<u-icon name="bookmark-fill" color="#2979ff" size="32"></u-icon>
						<text class="gui-h6 gui-boldder">上课时间</text>
					</view>
					<view class="">
						<text
							class="gui-text-small gui-color-gray">{{groupschedule.start_time}}~{{groupschedule.end_time}}</text>
					</view>
				</view>
				<view class="gui-color-red1 gui-h3 gui-flex gui-column" style="">
					<text class="gui-h4">
						({{groupschedule.current_appointment_amount}}/{{groupschedule.appointment_amount}})
					</text>
					<text class="gui-text-small gui-color-gray">约课情况</text>
				</view>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="tags-fill" color="#2979ff" size="32"></u-icon>
					<text
						class="gui-h6 gui-boldder">{{groupschedule.Groupcourse.course_type?groupschedule.Groupcourse.course_type.name:''}}</text>
				</view>
				<view class="gui-flex">
					<text class="gui-text-small gui-color-gray">训练强度:</text>
					<u-rate v-model="groupschedule.Groupcourse.intensity" count="5" readonly
						activeColor="#ffa502"></u-rate>
				</view>
				<view class="gui-flex gui-align-items-center">
					<text class="gui-text-small gui-color-gray">课卡颜色:</text>
					<view style="width:48rpx;height:32rpx;border-radius: 4rpx;"
						:style="{backgroundColor:groupschedule.Groupcourse.color}">
					</view>
					<!-- <u-rate :value="activity.Groupcourse.intensity" readonly></u-rate> -->
				</view>
				<view class="gui-flex gui-align-items-center">
					<text class="gui-text-small gui-color-gray">授课老师:</text>
					<text class="gui-text-small gui-color-gray">{{groupschedule.employee.name}}</text>
				</view>
				
			</view>

			<view class="" style="height: 180rpx;">

			</view>
		</view>
		<view class="pay-btn">
			<view class="pay-btn-warp">
				<up-button @tap="onSubmit" size="large" type="primary" color="linear-gradient(45deg,#52e5e7,#130cb7)"
					shape="circle" text="立即约课">
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import useGroupschedule from '@/api/groupschedule'
	import useGroupappointment from '@/api/gappointment'
	const { loadGroupschedule, groupschedule } = useGroupschedule()
	const {storeGAppointment} = useGroupappointment()
	const guiPage = ref()
	const userID = ref(JSON.parse(uni.getStorageSync("user"))["ID"])
	// 当前已经约课的次数
	const currentApptAmount = ref(0)
	const id = ref()

	const handleRemainAppt = () => {
		let tempData = []
		if (groupschedule.value.Groupappointments && groupschedule.value.Groupappointments.length > 0) {
			tempData = groupschedule.value.Groupappointments
			//判断tempData的每一项中存在user_id==userID时加1
			const times = tempData.reduce((acc, curr) => {
				return curr.user_id === userID.value ? acc + 1 : acc;
			}, 0)
			currentApptAmount.value = times
		}
		// 处理其他数据
		formState.value.employee_id=groupschedule.value.employee_id
		formState.value.groupcourse_id=groupschedule.value.groupcourse_id
	}
	onLoad((options) => {
		id.value = (+options.id)
		formState.value.id=id.value
	})

	onMounted(async () => {
		await loadGroupschedule(id.value)
		handleRemainAppt()
	})

	const formState = ref({
		id:0,
		user_id:userID.value,
		remark:"",
		employee_id:0,
		groupcourse_id:0,
		way:"mini",
		times: 1
	})
	
	const numberChange = (val) => {
		if (val[0] == (3 - currentApptAmount.value)) {
			formState.value.times = +(val[0])
			return uni.showToast({
				icon: "none",
				title: "已达上限"
			})
		}else{
			console.log("判断字符串")
			formState.value.times = +(val[0])
		}
		
	}

	const onSubmit = async () => {
		await storeGAppointment(formState.value)
		setTimeout(()=>{
			uni.switchTab({
				url:`/pages/appointment/index`
			})
		},1000)
	}
</script>
<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}

	.gui-shoppingcard-goods-number {
		padding: 2px 0;
	}

	.gui-shoppingcard-checkbtn {
		width: 200rpx;
	}

	.gui-shoppingcard-count {
		width: 200rpx;
		flex: 1;
	}

	.gui-shoppingcard-checkout {
		width: 260rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>